<template>
    <div class="page paddingTop0 walletPage">
        <!--开户成功-->
        <div class="openAccSucWrap">
            <div class="actTopWrap">
                <div class="FitHeight20"></div>
                <div class="actHead flex-container">
                    <a class="left" style="background: none"></a>
                    <h1>我的账户</h1>
                    <a class="right" @click="showTodo=!showTodo"></a>
                </div>
                <div class="actInfor flex-container">
                    <div>
                        <p>总资产</p>
                        <h1>{{allBalance}}</h1>
                        <p>可用金额（元）{{AvailableBalance}}</p>
                    </div>
                </div>
                <ul class="todoList" v-show="showTodo">
                    <li class="show1px"><a @click="isOpenAccount('/changeCard')">变更绑定卡</a></li>
                    <li class="show1px"><a @click="isOpenAccount('/changePassword')">修改密码</a></li>
                    <li><a to="/logout" @click="todoJump('/closeAccount')">注销账户</a></li>
                </ul>
            </div>
            <div class="actBotBtn flex-container">
                <router-link to="/rollOut">
                    <img src="./../assets/icon/rollOut.svg"/>
                    <p>转出</p>
                </router-link>
                <router-link to="/shiftTo">
                    <img src="./../assets/icon/shiftTo.svg"/>
                    <p>转入</p>
                </router-link>
            </div>
            <ul class="commonLists">
                <li @click="isOpenAccount('/openAccount')">理财<a>收益稳 0费用 利滚利</a></li>
            </ul>
        </div>
        <!--未开户-->
        <div class="noOpenAccount comOpenAccWrap flex-container" v-show="noOpenAcct">
            <div>
                <div><img src="./../assets/icon/openAcct1.png"/></div>
                <p>您没有开户哦，赶快去开户吧~</p>
                <router-link to="/openAccount">我要开户</router-link>
            </div>
        </div>
        <!--开户中-->
        <div class="OpenAccounting comOpenAccWrap flex-container" v-show="OpenAccting">
            <div>
                <div><img src="./../assets/icon/openAcct1.png"/></div>
                <p>您的开户请求已提交，请耐心等待~</p>
            </div>
        </div>
        <div class="tabBarWrap">
            <div class="tabBar flex-container">
                <router-link to="/"><span></span><p>首页</p></router-link>
                <router-link class="active" to="/wallet"><span></span><p>钱包</p></router-link>
                <router-link to="/userCenter"><span></span><p>个人中心</p></router-link>
            </div>
            <div class="FitHeight20"></div>
        </div>
    </div>
</template>

<script>
    import utils from  './../js/utils';
    export default {
        name: "wallet",
        data(){
            return {
                showTodo: false,
                State:{},
                Account: {}
            }
        },
        activated(){
            this.getStatus();
        },
        computed:{
            noOpenAcct(){
                return this.State == 0 || this.State == -1 || this.State == 3;
            },
            OpenAccSuc(){
                return this.State ==1;
            },
            OpenAccting(){
                return this.State == 2;
            },
            AvailableBalance(){
                return parseFloat(this.Account.AvailableBalance || 0).toFixed(2);
            },
            allBalance(){
                let Account = this.Account;
                let AvailableB = (Account.AvailableBalance || 0) - 0;
                let FreezeAmount = (Account.FreezeAmount || 0) - 0;
                return parseFloat(AvailableB + FreezeAmount).toFixed(2);
            }
        },
        methods:{
            /*
            * 判断用户是否开户
            * */
            getStatus(){
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Minsheng/getStatus',
                    success(result){
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        that.State = result.data.State;
                        if(that.State == 1)  that.AccountQuery();
                    }
                });
            },
            /*
            * 获取账户金额
            * */
            AccountQuery(){
                let that = this;
                utils.ajax({
                    url: utils.AJAX_SRC + 'Minsheng/AccountQuery',
                    success(result){
                        if(result.errcode < 0){
                            utils.showTips(result.errmsg);
                            return;
                        }
                        that.Account = result.data;
                        utils.setSessionStorage('Account' , result.data);
                    }
                });
            },
            todoJump(href){
                this.showTodo = !this.showTodo;
                this.$router.push({ path: href});
            },
            isOpenAccount(href){

            }
        }
    }
</script>

<style scoped>
    .page{padding-bottom: 2.5rem;}
    .actTopWrap{position: relative;}
    .actBotBtn{background: #fff;height: 3rem;align-items: center;text-align: center;}
    .actBotBtn a{flex: 1;position: relative;color: #00acfd;}
    .actBotBtn img{width: 1.3rem;}
    .actBotBtn >a:first-child{border-right: 1px solid #f1f1f1;}
    .commonLists{margin-top: 0.5rem;}
    .commonLists li{height: 2.8rem;line-height: 2.8rem;padding: 0 0.75rem;background: #fff url(./../assets/icon/licai.png) no-repeat 0.75rem center / 0.8rem;font-size: 0.8rem;color: #1d1d1d;padding-left: 2rem;}
    .commonLists a{float: right;font-size: 0.7rem;color: #a5a7a9;display: block;padding-right: 0.8rem;background: url(./../assets/icon/arrow-right.svg) no-repeat right center / 0.4rem;}
    .actBotBtn{background: #fff;height: 3rem;align-items: center;text-align: center;}
    .todoList{position: fixed;right: 0.5rem;top: 2.3rem;z-index: 99;background: #fff;border-radius: 0.1rem;width: 6rem;padding: 0.2rem 0.5rem;font-size: 0.65rem;}
    .todoList > li{line-height: 2rem;position: relative;padding-left: 1.2rem;}
    .todoList > li:first-child{background: url(./../assets/icon/changeCard.png) no-repeat left center / auto 0.7rem;}
    .todoList > li:nth-child(2){background: url(./../assets/icon/chgPsd.png) no-repeat 0.05rem center / auto 0.95rem;}
    .todoList > li:last-child{background: url(./../assets/icon/logout.png) no-repeat left center / auto 0.9rem;}
    .todoList a{display: block;color: #3d4145;}
    .todoList:before{content: "";position: absolute;top: -0.8rem;right: 0.4rem;height: 0;width:0;border: 0.4rem solid transparent;border-bottom-color: #fff;}
    .comOpenAccWrap{position: fixed;left: 0;top: 0;right: 0;bottom: 2.5rem;z-index: 1001;background: rgba(0,0,0,0.6);justify-content: center;align-items: center;}
    .comOpenAccWrap > div{width: 80%;text-align: center;}
    .comOpenAccWrap img{width: 70%;}
    .comOpenAccWrap p{color: #fff;margin: 2rem 0;font-size: 0.75rem;}
    .comOpenAccWrap a{display: block;height: 1.8rem;line-height: 1.8rem;width: 6rem;margin: 0 auto;border: 1px solid #00acfd;color: #00acfd;border-radius: 0.3rem;font-size: 0.8rem;}
</style>
